<!--
  动态表格 用于批量填入数据
 -->
<template>
  <div :id="value" :name="value" class="form-table-index mobile-t-sub-form">
    <div v-for="(valueItem, index) in value" class="card" :key="index">
      <van-cell class="block-title" :title="`序号：${index+1}`">
        <template scope="value">
          <el-button @click="updateDomain(index,valueItem)" type="text">修改</el-button>
          <el-button @click="copyDomain(valueItem)" type="text">复制</el-button>
          <el-button @click="removeDomain(index)" type="text">删除</el-button>
        </template>
      </van-cell>
      <van-cell-group :border="false">
        <van-cell
          v-for="option in item.childList"
          :title="getTableColumnLabel(option)"
          :key="option.vModel"
          :value="showText(valueItem, option.vModel)"
        >
        </van-cell>
      </van-cell-group>
    </div>

    <el-button size="mini" icon="el-icon-circle-plus-outline" :disabled="disabled" @click="addDomain">
      增加
    </el-button>
    <AddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" :fields="item.childList"
                 @submit="handleFormSubmit"
    />
  </div>
</template>

<script>
import 'vant/lib/cell/style';
import 'vant/lib/cell-group/style';

import {Cell, CellGroup} from 'vant';

import AddOrUpdate from './AddOrUpdate'
import mixin from '../mixin'
import {isLabelTag} from "../../GenerateForm/FormItemLabel"
import {removeHtmlTag} from "../../../utils/index"

export default {
  name: 'MobileTSubForm',
  components: {
    AddOrUpdate,
    VanCell: Cell,
    VanCellGroup: CellGroup
  },
  mixins: [mixin],
  props: ['models'],
  data() {
    return {
      addOrUpdateVisible: false,
      isVisible: true
    }
  },
  computed: {
    disabled() {
      return this.item.disabled
    }
  },
  methods: {
    showText(row, key) {
      if (isLabelTag(key)) {
        return row[`${key}label`]
      }
      return row[key]
    },
    getTableColumnLabel(option) {
      if (option.config.label) {
        return removeHtmlTag(option.config.label)
      }
      return ""
    },
    removeDomain(index) {
      this.$confirm('确定删除此数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (index !== -1) {
          this.value.splice(index, 1)
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000
          })
        }
      })
    },
    updateDomain(index, data) {
      this.addOrUpdateVisible = true
      data.index = index
      this.$nextTick(() => {
        this.$refs.addOrUpdate.showDialog(data)
      })
    },
    copyDomain(data) {
      this.value.push(data)
    },
    addDomain() {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.showDialog()
      })
    },
    handleFormSubmit(val) {
      if (!this.value) {
        this.value = []
      }
      if (val.index != undefined) {
        this.$set(this.value, val.index, val)
      } else {
        this.value.push(val)
      }
    },
    handleInput() {
      this.$emit('change', this.models)
    }
  }
}
</script>

<style lang="scss">
.mobile-t-sub-form {
  .card {
    background-color: #fafafa;

    .van-cell-group {
      background-color: transparent;
      margin-bottom: 10px;
    }

    .van-cell {
      background: transparent;
    }

    .block-title {
      .van-cell__title {
        font-weight: bold;
      }
    }
  }

  .el-button--text {
    padding: 0;
  }
}
</style>
